<template>
    <div>
        <!--  可以用this.$emit来触发@getCount事件，但是问题就又来了
              分析：子组件什么时候把值传递给父组件
              -->
        <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <!--  属性绑定value，接收父组件传递过来的值-->
            <input id="test" class="mui-input-numbox" type="number" :value="initcount"
                   @change="countChanged" ref="numbox"/>
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
    </div>
</template>
<script>
    import mui from '../lib/mui/js/mui.js'

    export default {
        data() {
            return {}
        },
        mounted() {
            // mui在mui.init()中会自动初始化基本控件,但是 动态添加的Numbox组件需要手动初始化
            mui('.mui-numbox').numbox();
        },
        methods: {
            countChanged() {
                //数量改变了
                //每当数量值改变了，就立即把最新的数量同步到购物车的store中，覆盖之前的值
                this.$store.commit("updateGoodsInfo",{
                    id:this.goodsid,
                    count:this.$refs.numbox.value
                })
            },

        },
        props: [//接收父组件传递过来的值
            "initcount","goodsid"
        ]
    };
</script>
<style lang="scss" scoped>

</style>